<template>
  <div class="template-explorer">
    <!-- 1. Banner/搜索区 (顶部红色区域) -->
    <div class="header-banner">
      <div class="container banner-content">
        <h1>精选模板</h1>
        <p>发现传统与现代的剪纸艺术，开启您的创作之旅</p>
        <div class="search-box">
          <input type="text" v-model="filters.keyword" placeholder="搜索模板名称、风格或标签" />
          <button @click="fetchTemplates">搜索</button>
        </div>
      </div>
    </div>

    <!-- 2. 维度筛选区 -->
    <div class="container filters-section">
      <!-- 2.1 分类筛选 (对应 pc_category) -->
      <FilterGroup
        label="分类"
        :items="dimensions.categories"
        v-model="filters.categoryId"
        dataKey="id"
        nameKey="name"
      />

      <!-- 2.2 主题筛选 (对应 pc_theme) -->
      <FilterGroup
        label="主题"
        :items="dimensions.themes"
        v-model="filters.themeId"
        dataKey="id"
        nameKey="name"
      />

      <!-- 2.3 排序/技法/布局等 (根据实际需求调整) -->
      <FilterGroup
        label="技法"
        :items="dimensions.techniques"
        v-model="filters.techniqueId"
        dataKey="id"
        nameKey="name"
      />
      <!-- 2.4 排序/技法/布局等 (根据实际需求调整) -->
      <FilterGroup
        label="布局"
        :items="dimensions.layouts"
        v-model="filters.layoutId"
        dataKey="id"
        nameKey="name"
      />
      <!-- 2.5 排序/技法/布局等 (根据实际需求调整) -->
      <FilterGroup
        label="派系"
        :items="dimensions.authorStyles"
        v-model="filters.authorId"
        dataKey="id"
        nameKey="name"
      />

      <!-- 排序下拉菜单 -->
      <div class="sort-controls">
        <label>排序:</label>
        <select v-model="filters.sortBy" @change="fetchTemplates">
          <option value="rating">热门优先 (评分)</option>
          <option value="time">最新上传</option>
          <option value="id">默认排序</option>
        </select>
      </div>
    </div>

    <!-- 3. 模板卡片列表 -->
    <div class="container template-grid">
      <TemplateCard
        v-for="template in templates"
        :key="template.id"
        :template="template"
        @click="goToDetail(template.id)"
      />
      <!-- 加载状态或空结果 -->
      <p v-if="loading">加载中...</p>
      <p v-else-if="templates.length === 0">未找到符合条件的模板。</p>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { searchTemplates } from '@/api/templateApi'
import { getAllDimensions } from '@/api/dimensionApi'
import TemplateCard from '@/components/TemplateCard.vue' // 模板卡片组件
import FilterGroup from '@/components/FilterGroup.vue' // 筛选标签组组件

const router = useRouter()
const templates = ref([])
const loading = ref(false)

// 筛选状态，对应后端的 RequestParam
const filters = reactive({
  categoryId: null,
  themeId: null,
  techniqueId: null,
  layoutId: null,
  authorId: null,
  keyword: '',
  sortBy: 'rating',
})

// 维度数据存储
const dimensions = reactive({
  categories: [],
  themes: [],
  techniques: [],
  layouts: [],
  authorStyles: [],
})

// **********************************************
// 核心逻辑 1: 获取维度数据 (联调 /api/dimensions/*)
// **********************************************
const fetchDimensions = async () => {
  try {
    const [categoriesRes, themesRes, techniquesRes, layoutsRes, authorStylesRes] =
      await getAllDimensions()

    // 添加 '全部' 选项 (id: null)，并赋值给 reactive state
    dimensions.categories = [{ id: null, name: '全部' }, ...categoriesRes.data]
    dimensions.themes = [{ id: null, name: '全部' }, ...themesRes.data]
    dimensions.techniques = [{ id: null, name: '全部' }, ...techniquesRes.data]
    dimensions.layouts = [{ id: null, name: '全部' }, ...layoutsRes.data]
    dimensions.authorStyles = [{ id: null, name: '全部' }, ...authorStylesRes.data]
  } catch (error) {
    console.error('获取维度数据失败:', error)
    // 调试关键：检查 F12 Network 标签和 Console 报错
    alert('维度数据加载失败，请检查后端 API (http://localhost:8080/api/dimensions/*) 是否可用。')
  }
}

// **********************************************
// 核心逻辑 2: 获取模板数据 (联调 /api/templates/papercut)
// **********************************************
const fetchTemplates = async () => {
  // ... 保持不变，它会自动使用 filters.value 作为查询参数
  // ...
  const cleanFilters = Object.fromEntries(
    Object.entries(filters).filter(([_, v]) => v !== null && v !== ''),
  )
  const response = await searchTemplates(cleanFilters)
  templates.value = response.data
  // ...
}

// **********************************************
// 核心逻辑 3: 筛选联动 (自动触发搜索)
// **********************************************
watch(() => filters.categoryId, fetchTemplates)
watch(() => filters.themeId, fetchTemplates)
watch(() => filters.techniqueId, fetchTemplates)
watch(() => filters.layoutId, fetchTemplates) // <-- 新增布局 ID 监听
watch(() => filters.authorId, fetchTemplates) // <-- 新增派系 ID 监听
// 关键词和排序已在模板中绑定 @click 或 @change

// **********************************************
// 路由跳转
// **********************************************
const goToDetail = (id) => {
  router.push(`/templates/${id}`)
}

onMounted(() => {
  fetchDimensions()
  fetchTemplates()
})
</script>

<style scoped>
/* 这里应包含 HeaderBanner 和 filters-section 的样式 */
/* 样式参考图示，省略具体实现 */
.header-banner {
  background-color: #f7786b; /* 类似图示的红色 */
  padding: 50px 0;
  color: white;
  text-align: center;
}
.filters-section {
  padding: 20px 0;
  border-bottom: 1px solid #eee;
  /* 使用 grid 或 flex 布局 */
}
.template-grid {
  display: grid;
  /* 关键：使用 repeat(auto-fill, ...) 来确保卡片宽度一致且自动换行 */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px; /* 确保卡片间有间隔 */
  padding: 40px 0;
}
.sort-controls {
  text-align: right;
  margin-top: 15px;
}
.search-box {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.search-box input {
  padding: 10px 15px;
  width: 400px;
  border: none;
  border-radius: 25px 0 0 25px;
}
.search-box button {
  padding: 10px 20px;
  background-color: #e53935;
  color: white;
  border: none;
  border-radius: 0 25px 25px 0;
  cursor: pointer;
}
</style>
